var HZWUpload = function () {

	var ratio = window.devicePixelRatio || 1,
		thumbSize = 100 * ratio,
		serverUrl = "";


	function initCreate (chooseBtn) {
		return WebUploader.create({
			// 选完文件后，是否自动上传。
			auto: true,
			// swf文件路径
			swf: '/dist/Uploader.swf',
			// 文件接收服务端。
			server: serverUrl,
			//指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash.
			runtimeOrder: 'html5,flash',
			pick: {
				//支持 class, 或者 dom 节点
				id: chooseBtn,
				//是否开起同时选择多个文件能力
				multiple: false,
			},
			//设置文件上传域的name
			fileVal: "file",
			//是否允许在文件传输时提前把下一个文件准备好
			prepareNextFile: true,
			//压缩
			compress: false,
			//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
			duplicate: true,
			// 只允许选择图片文件。
			accept: {
				title: 'Images',
				extensions: 'gif,jpg,jpeg,bmp,png',
				mimeTypes: 'image/*'
			}
		});
	}

	function uploadEvent (uploader, obj) {
		var $list = obj.parents(".upload-container").find(".item-list");
		//加入队列
		uploader.onFileQueued = function (file) {
			var $li = $(
				'<div id="' + file.id + '" class="file-item" style="width:' +
				thumbSize + 'px;height:' +
				thumbSize + 'px">' +
				'<img><p class="upload-state" ><i class="iconfont icon-cloud-upload"></i></p>' +
				'</div>'
			),
				$img = $li.find('img');
			// $list为容器jQuery实例
			$list.append($li);
			// 创建缩略图
			// 如果为非图片文件，可以不用调用此方法。
			// thumbnailWidth x thumbnailHeight 为 100 x 100
			this.makeThumb(file, function (error, src) {
				if (error) {
					$img.replaceWith('<div class="item-cover"><i class="iconfont icon-file-image"></i></div>');
					return;
				}
				$img.attr('src', src);
			}, thumbSize, thumbSize);
		};


		//一堆文件加入队列
		uploader.onFilesQueued = function (files) {
			//todo...
		};

		//当文件被移除队列后触发
		uploader.onFileDequeued = function (file) {

		};

		//上传之前
		uploader.onBeforeFileQueued = function (file) {
			var $files = this.getFiles();

			if ($files.length > 0) {
				//提示信息
				console.log("请等待上一个传输完毕");
				return false;
			}
			$list.children().remove();
		};

		//当开始上传流程时触发
		uploader.onStartUpload = function () {
			//todo...
		};

		//暂停
		uploader.onStopUpload = function () {
			//todo...
		};

		//上传进度
		uploader.onUploadProgress = function (file, percentage) {
			var $li = $('#' + file.id),
				$percent = $li.find('.progress .progress-bar');
			// 避免重复创建
			if (!$percent.length) {
				$percent = $('<div class="progress progress-striped active">' +
					'<div class="progress-bar" role="progressbar" style="width: 0%">' +
					'</div>' +
					'</div>').appendTo($li).find('.progress-bar');
			}
			$li.find('p.upload-state').attr('title', '正在上传').html(parseInt(percentage * 100) + '%');
			$percent.css('width', percentage * 100 + '%');
		};

		//上传成功
		uploader.onUploadSuccess = function (file, response) {
			//服务器端返回的上传
			var $obj = $('#' + file.id);
			var $item = $obj.find('p.upload-state');
			if (response.state == 'SUCCESS') {
				$item.attr("title", "上传成功");
				$item.removeClass("upload-state-error").html('<i class="iconfont icon-check"></i>');
			} else {
				$item.attr("title", response.state);
				var $error = $obj.find('p.upload-state-error');
				if (!$error.length) {
					$item.addClass("upload-state-error").html('<i class="iconfont icon-close"></i>');
				}
			}

		};

		//上传失败
		uploader.onUploadError = function (file) {
			var $obj = $('#' + file.id);
			var $item = $obj.find('p.upload-state');
			var $error = $obj.find('p.upload-state-error');
			$item.attr("title", "上传失败");
			if (!$error.length) {
				$item.addClass("upload-state-error").html('<i class="iconfont icon-close"></i>');
			}
		};


		//不管成功或者失败，文件上传完成时触发
		uploader.onUploadComplete = function (file) {
			$('#' + file.id).find('.progress').fadeOut();
			this.reset();
		};

		//所有文件上传结束
		uploader.onUploadFinished = function () {

		};

		uploader.onError = function (type, handler) {
			console.log(type);
			if (type === "Q_TYPE_DENIED") {
				//提示信息
				console.log('只允许上传图片类型');
			} else if (type === "F_EXCEED_SIZE") {
				//提示信息
				console.log('上传文件超过限制');
			}
		};
	}

	return {
		init: function () {
			var container = $("#container");
			var childrenObj = container.find(".upload-container").first();
			var html = childrenObj.html();
			var chooseBtn = $(".upload-container").find(".btn-file-picker");
			chooseBtn.each(function () {
				uploadEvent(initCreate($(this)), $(this));
			});

			$("button.add").click(function () {
				var obj = $('<div class="upload-container">' + html + '</div>');
				container.append(obj);
				var btn = obj.find(".btn-file-picker");
				uploadEvent(initCreate(btn), btn);
			});
		}
	}
}();


jQuery(document).ready(function () {
	HZWUpload.init();
});










